<template>
  <div>
    <Col span="16">
      <Card class="banner" style="height: 600px">
        <div>
          <img id="centerImg" :src="imgSrc" style="height: 500px;width: 700px;">
          <div>
            <img id="rightArrow" :src="right" @click="frontImage" style="width: 50px;height: 50px;">
            <img id="leftArrow" :src="left" @click="backImage" style="width: 50px;height: 50px;">
          </div>
        </div>
      </Card>
    </Col>
    <Col span="8">
      <div style="margin-left: 30px">
        <Card shadow style="height: 600px">
          <h3 style="margin-left:15px">当前图片标签</h3>
          <CellGroup @on-click="clickCell">
            <Cell
              v-for="item in selectedList"
              :title="item.title"
              :label="item.label"
              :name="item.name"
              :selected="item.selected"
              style="margin-top: 15px"
            ></Cell>
          </CellGroup>
          <Button type="info" long @click="updateTabs" style="border-radius: 0">重新标注</Button>
          <Button type="primary" long @click="updateTabs" style="border-radius: 0;margin-top: 10px">一键训练</Button>
        </Card>
      </div>
    </Col>
  </div>
</template>

<script>
export default {
  name: "uncompleteCom",
  data() {
    return {
      labels: ['facebook', 'github'],
      index: 1 ,
      imgSrc: require("./smoke.jpg"),
      selectedList:[
        {
          index:1,
          name:"smoke",
          title: "抽烟",
          label: "Smoking",
          selected: true,
        },
        {
          name:"eye",
          title: "闭眼",
          label: "Close Eyes",
          selected: false,
        },
        {
          name:"eat",
          title: "吃东西",
          label: "Eating",
          selected: false,
        },
        {
          name:"phone",
          title: "打电话",
          label: "Phone Call",
          selected: false,
        },
        {
          name:"yawn",
          title: "打哈欠",
          label: "Yawning",
          selected: false,
        },
        {
          name:"hand",
          title: "手持异物",
          label: "Handing Something",
          selected: false,
        },
        {
          name:"wheel",
          title: "双手离开方向盘",
          label: "Off The Wheel",
          selected: false,
        },
      ],
      left: require("./left.png"),
      right: require("./right.png"),
      imgList:[
        require("./smoke.jpg"),
        require("./254.png"),
        require("./425.png"),
      ]
    }
  },
  methods:{
    clickCell(name){
      this.selectedList.forEach(item=>{
        if (item.name==name){
          item.selected=!item.selected;
        }
      })
    },
    updateTabs(){
      this.$Message.info("修改标签成功");
    },
    frontImage(){
      console.log(this.imgSrc)
      this.index++;
      this.imgSrc=this.imgList[(this.index % this.imgList.length)];
    },
    backImage(){
      console.log(this.imgSrc)
      this.index--;
      if(this.index<0){
        this.index += this.imgList.length;
      }
      this.imgSrc=this.imgList[(this.index % this.imgList.length)];
    }
  }
}
</script>
<style scoped>
#rightArrow{
  position: absolute;
  top: 300px;
  left: 0px;
}

#leftArrow{
  position: absolute;
  top: 300px;
  right: -10px;
}
CheckboxGroup span{
  font-size: 20px;
}
#centerImg{
  position: absolute;
  top: 50px;
  left: 55px;
  box-shadow: black 0px 0px 20px;
}
</style>
